React Router v6: Navigācijas modeļu apgūšana modernām tīmekļa lietotnēm

React Router v6 ir jaudīga un elastīga maršrutēšanas bibliotēka React lietotnēm. Tā ļauj jums izveidot vienas lapas lietotnes (SPA) ar nevainojamu lietotāja pieredzi, pārvaldot navigāciju bez pilnīgas lapas pārlādes. Šajā bloga ierakstā mēs iedziļināsimies būtiskos navigācijas modeļos, izmantojot React Router v6, sniedzot jums zināšanas un piemērus, lai veidotu stabilas un lietotājam draudzīgas tīmekļa lietotnes.

React Router v6 pamatkoncepciju izpratne

Pirms iedziļināties konkrētos modeļos, apskatīsim dažas pamatkoncepcijas:

• Deklaratīvā maršrutēšana: React Router izmanto deklaratīvu pieeju, kurā jūs definējat savus maršrutus kā React komponentus. Tas padara jūsu maršrutēšanas loģiku skaidru un uzturamu.
• Komponenti: Galvenie komponenti ietver BrowserRouter, HashRouter, MemoryRouter, Routes un Route.
• Huki (Hooks): React Router nodrošina hukus, piemēram, useNavigate, useLocation, useParams un useRoutes, lai piekļūtu maršrutēšanas informācijai un manipulētu ar navigāciju.

1. Deklaratīvā maršrutēšana ar <Routes> un <Route>

React Router v6 pamats ir deklaratīvā maršrutēšana. Jūs definējat savus maršrutus, izmantojot <Routes> un <Route> komponentus. <Routes> komponents darbojas kā konteiners jūsu maršrutiem, un <Route> komponents definē konkrētu maršrutu un komponentu, kas jāattēlo, kad šis maršruts atbilst pašreizējam URL.

Piemērs: Pamata maršrutu konfigurācija

Šeit ir pamata piemērs, kā iestatīt maršrutus vienkāršai lietotnei:

import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./pages/Home";
import About from "./pages/About";
import Contact from "./pages/Contact";

function App() {
  return (
    
      
        } />
        } />
        } />
      
    
  );
}

export default App;

Šajā piemērā mēs definējam trīs maršrutus:

• /: Attēlo Home komponentu.
• /about: Attēlo About komponentu.
• /contact: Attēlo Contact komponentu.

BrowserRouter komponents nodrošina pārlūkprogrammas vēsturē balstītu maršrutēšanu. React Router salīdzina pašreizējo URL ar definētajiem maršrutiem un attēlo atbilstošo komponentu.

2. Dinamiskie maršruti ar URL parametriem

Dinamiskie maršruti ļauj jums izveidot maršrutus, kas var apstrādāt dažādas vērtības URL. Tas ir noderīgi, lai attēlotu saturu, pamatojoties uz unikālu identifikatoru, piemēram, produkta ID vai lietotāja ID. React Router v6 izmanto : simbolu, lai definētu URL parametrus.

Piemērs: Produkta detaļu attēlošana

Pieņemsim, ka jums ir e-komercijas lietotne un vēlaties attēlot katra produkta detaļas, pamatojoties uz tā ID. Jūs varat definēt dinamisku maršrutu šādi:

import { BrowserRouter, Routes, Route, useParams } from "react-router-dom";

function ProductDetails() {
  const { productId } = useParams();

  // Ielādēt produkta informāciju, pamatojoties uz productId
  // ...

  return (
    

      
Produkta informācija
      
Produkta ID: {productId}
      {/* Šeit attēlot produkta informāciju */}
    
  );
}

function App() {
  return (
    
      
        } />
      
    
  );
}

export default App;

Šajā piemērā:

• /products/:productId definē dinamisku maršrutu, kur :productId ir URL parametrs.
• useParams huks tiek izmantots, lai piekļūtu productId parametra vērtībai ProductDetails komponentā.
• Pēc tam varat izmantot productId, lai ielādētu atbilstošo produkta informāciju no sava datu avota.

Internacionalizācijas piemērs: Valodu kodu apstrāde

Daudzvalodu vietnei jūs varētu izmantot dinamisku maršrutu, lai apstrādātu valodu kodus:

} />

Šis maršruts atbilstu tādiem URL kā /en/about, /fr/about un /es/about. lang parametru var izmantot, lai ielādētu atbilstošos valodas resursus.

3. Programmatiskā navigācija ar useNavigate

Lai gan deklaratīvā maršrutēšana ir lieliski piemērota statiskām saitēm, bieži vien ir nepieciešams navigēt programmatiski, pamatojoties uz lietotāja darbībām vai lietotnes loģiku. React Router v6 šim nolūkam piedāvā useNavigate huku. useNavigate atgriež funkciju, kas ļauj jums pārvietoties uz dažādiem maršrutiem.

Piemērs: Pāradresācija pēc formas iesniegšanas

Pieņemsim, ka jums ir formas iesniegšana un vēlaties pāradresēt lietotāju uz veiksmes lapu pēc veiksmīgas formas iesniegšanas:

import { useNavigate } from "react-router-dom";

function MyForm() {
  const navigate = useNavigate();

  const handleSubmit = async (event) => {
    event.preventDefault();

    // Iesniegt formas datus
    // ...

    // Pāradresēt uz veiksmīgas pabeigšanas lapu pēc veiksmīgas iesniegšanas
    navigate("/success");
  };

  return (
    

      {/* Formas lauki */}
      Iesniegt
    
  );
}

export default MyForm;

Šajā piemērā:

• Mēs izmantojam useNavigate huku, lai iegūtu navigate funkciju.
• Pēc veiksmīgas formas iesniegšanas mēs izsaucam navigate("/success"), lai pāradresētu lietotāju uz /success maršrutu.

Stāvokļa (State) nodošana navigācijas laikā

Jūs varat arī nodot stāvokli kopā ar navigāciju, izmantojot otro argumentu funkcijai navigate:

navigate("/confirmation", { state: { orderId: "12345" } });

Tas ļauj nodot datus mērķa komponentam, kuriem var piekļūt, izmantojot useLocation huku.

4. Ligzdotie maršruti un izkārtojumi (Layouts)

Ligzdotie maršruti ļauj jums izveidot hierarhiskas maršrutēšanas struktūras, kur viens maršruts ir ligzdots citā. Tas ir noderīgi, lai organizētu sarežģītas lietotnes ar vairākiem navigācijas līmeņiem. Tas palīdz veidot izkārtojumus, kur noteikti lietotāja saskarnes elementi ir konsekventi redzami visā lietotnes sadaļā.

Piemērs: Lietotāja profila sadaļa

Pieņemsim, ka jums ir lietotāja profila sadaļa ar ligzdotiem maršrutiem, lai attēlotu lietotāja profila informāciju, iestatījumus un pasūtījumus:

import { BrowserRouter, Routes, Route, Link } from "react-router-dom";

function Profile() {
  return (
    

      
Lietotāja profils
      

        

          Profila informācija
        
        

          Iestatījumi
        
        

          Pasūtījumi
        
      

      
        } />
        } />
        } />
      
    
  );
}

function ProfileInformation() {
  return 
Profila informācijas komponents
;
}

function Settings() {
  return 
Iestatījumu komponents
;
}

function Orders() {
  return 
Pasūtījumu komponents
;
}

function App() {
  return (
    
      
        } />
      
    
  );
}

export default App;

Šajā piemērā:

• /profile/* maršruts atbilst jebkuram URL, kas sākas ar /profile.
• Profile komponents attēlo navigācijas izvēlni un <Routes> komponentu, lai apstrādātu ligzdotos maršrutus.
• Ligzdotie maršruti definē komponentus, kas jāattēlo /profile/info, /profile/settings un /profile/orders gadījumos.

* simbols vecākmaršrutā ir būtisks; tas norāda, ka vecākmaršrutam ir jāatbilst jebkuram apakšceļam, ļaujot ligzdotajiem maršrutiem pareizi tikt atrasti Profile komponenta ietvaros.

5. "Nav atrasts" (404) kļūdu apstrāde

Ir svarīgi apstrādāt gadījumus, kad lietotājs nonāk maršrutā, kas neeksistē. React Router v6 to padara viegli izdarāmu ar visu tverošu (catch-all) maršrutu.

Piemērs: 404 lapas ieviešana

import { BrowserRouter, Routes, Route, Link } from "react-router-dom";

function NotFound() {
  return (
    

      
404 - Nav atrasts
      
Lapa, kuru meklējat, neeksistē.
      Atgriezties uz sākumlapu
    
  );
}

function App() {
  return (
    
      
        } />
        } />
        } />
      
    
  );
}

Šajā piemērā:

• <Route path="*" element={<NotFound />} /> maršruts ir visu tverošs maršruts, kas atbilst jebkuram URL, kurš neatbilst nevienam citam definētam maršrutam.
• Ir svarīgi novietot šo maršrutu <Routes> komponenta beigās, lai tas atbilstu tikai tad, ja neviens cits maršruts neatbilst.

6. Datu ielādes stratēģijas ar React Router v6

React Router v6 neietver iebūvētus datu ielādes mehānismus kā tā priekšgājējs (React Router v5 ar `useRouteMatch`). Tomēr tas nodrošina rīkus, lai efektīvi ieviestu dažādas datu ielādes stratēģijas.

1. variants: Datu ielāde komponentos

Vienkāršākā pieeja ir ielādēt datus tieši komponentā, kas attēlo maršrutu. Jūs varat izmantot useEffect huku, lai ielādētu datus, kad komponents tiek montēts vai kad mainās URL parametri.

import { useParams } from "react-router-dom";
import { useEffect, useState } from "react";

function ProductDetails() {
  const { productId } = useParams();
  const [product, setProduct] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchProduct() {
      try {
        const response = await fetch(`/api/products/${productId}`);
        if (!response.ok) {
          throw new Error(`HTTP kļūda! statuss: ${response.status}`);
        }
        const data = await response.json();
        setProduct(data);
        setLoading(false);
      } catch (e) {
        setError(e);
        setLoading(false);
      }
    }

    fetchProduct();
  }, [productId]);

  if (loading) return 
Ielādē...
;
  if (error) return 
Kļūda: {error.message}
;
  if (!product) return 
Produkts nav atrasts
;

  return (
    

      
{product.name}
      
{product.description}
    
  );
}

export default ProductDetails;

Šī pieeja ir vienkārša, bet var novest pie koda dublēšanās, ja nepieciešams ielādēt datus vairākos komponentos. Tā ir arī mazāk efektīva, jo datu ielāde sākas tikai pēc komponenta montēšanas.

2. variants: Pielāgota huka izmantošana datu ielādei

Lai samazinātu koda dublēšanos, varat izveidot pielāgotu huku, kas iekapsulē datu ielādes loģiku. Šo huku pēc tam var atkārtoti izmantot vairākos komponentos.

import { useState, useEffect } from "react";

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch(url);
        if (!response.ok) {
          throw new Error(`HTTP kļūda! statuss: ${response.status}`);
        }
        const json = await response.json();
        setData(json);
        setLoading(false);
      } catch (e) {
        setError(e);
        setLoading(false);
      }
    }

    fetchData();
  }, [url]);

  return { data, loading, error };
}

export default useFetch;

Pēc tam jūs varat izmantot šo huku savos komponentos:

import { useParams } from "react-router-dom";
import useFetch from "./useFetch";

function ProductDetails() {
  const { productId } = useParams();
  const { data: product, loading, error } = useFetch(`/api/products/${productId}`);

  if (loading) return 
Ielādē...
;
  if (error) return 
Kļūda: {error.message}
;
  if (!product) return 
Produkts nav atrasts
;

  return (
    

      
{product.name}
      
{product.description}
    
  );
}

export default ProductDetails;

3. variants: Maršrutēšanas bibliotēkas izmantošana ar datu ielādes iespējām (TanStack Router, Remix)

Bibliotēkas, piemēram, TanStack Router un Remix, piedāvā iebūvētus datu ielādes mehānismus, kas nevainojami integrējas ar maršrutēšanu. Šīs bibliotēkas bieži nodrošina tādas funkcijas kā:

• Loaderi: Funkcijas, kas tiek izpildītas *pirms* maršruta attēlošanas, ļaujot jums ielādēt datus un nodot tos komponentam.
• Darbības (Actions): Funkcijas, kas apstrādā formu iesniegšanu un datu mutācijas.

Šādas bibliotēkas izmantošana var krasi vienkāršot datu ielādi un uzlabot veiktspēju, īpaši sarežģītām lietotnēm.

Servera puses renderēšana (SSR) un statisko vietņu ģenerēšana (SSG)

Lai uzlabotu SEO un sākotnējās ielādes veiktspēju, apsveriet SSR vai SSG izmantošanu ar ietvariem, piemēram, Next.js vai Gatsby. Šie ietvari ļauj jums ielādēt datus uz servera vai būvēšanas laikā un pasniegt klientam iepriekš renderētu HTML. Tas novērš nepieciešamību klientam ielādēt datus sākotnējā ielādē, nodrošinot ātrāku un SEO draudzīgāku pieredzi.

7. Darbs ar dažādiem maršrutētāju veidiem

React Router v6 nodrošina dažādas maršrutētāju implementācijas, lai tās atbilstu dažādām vidēm un lietošanas gadījumiem:

• BrowserRouter: Izmanto HTML5 vēstures API (pushState, replaceState) navigācijai. Tā ir visizplatītākā izvēle tīmekļa lietotnēm, kas darbojas pārlūkprogrammas vidē.
• HashRouter: Izmanto URL heša (hash) daļu (#) navigācijai. Tas ir noderīgi lietotnēm, kurām jāatbalsta vecākas pārlūkprogrammas vai kuras tiek izvietotas uz serveriem, kas neatbalsta HTML5 vēstures API.
• MemoryRouter: Saglabā jūsu "URL" vēsturi atmiņā (URL masīvā). Noderīgs vidēs, piemēram, React Native un testēšanā.

Izvēlieties maršrutētāja veidu, kas vislabāk atbilst jūsu lietotnes prasībām un videi.

Noslēgums

React Router v6 nodrošina visaptverošu un elastīgu maršrutēšanas risinājumu React lietotnēm. Izprotot un pielietojot šajā bloga ierakstā apskatītos navigācijas modeļus, jūs varat veidot stabilas, lietotājam draudzīgas un uzturamas tīmekļa lietotnes. No deklaratīvās maršrutēšanas ar <Routes> un <Route> līdz dinamiskiem maršrutiem ar URL parametriem, programmatiskai navigācijai ar useNavigate un efektīvām datu ielādes stratēģijām, React Router v6 dod jums iespēju radīt nevainojamu navigācijas pieredzi saviem lietotājiem. Apsveriet iespēju izpētīt progresīvas maršrutēšanas bibliotēkas un SSR/SSG ietvarus, lai iegūtu vēl lielāku kontroli un veiktspējas optimizāciju. Atcerieties pielāgot šos modeļus savas lietotnes konkrētajām prasībām un vienmēr prioritizēt skaidru un intuitīvu lietotāja pieredzi.